<template>
  <DetailFieldItem
    v-slot="{ hasValue, value }"
    :field="field"
    :is-floating="isFloating"
    :resource="resource"
    :resource-name="resourceName"
    :resource-id="resourceId"
  >
    <a
      v-if="hasValue"
      :href="value"
      target="_blank"
      rel="noopener noreferrer"
      class="link inline-flex items-center break-all text-sm"
    >
      {{ value }}
      <Icon icon="ExternalLink" class="ml-1 mt-0.5 h-4 w-4 self-start" />
    </a>

    <span v-else>&mdash;</span>
  </DetailFieldItem>
</template>

<script setup>
defineProps(['resource', 'resourceName', 'resourceId', 'field', 'isFloating'])
</script>
